/*
 * 编辑属性
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27 
 * @Last Modified by: ljb
 * @Last Modified time: 2018-04-23 17:36:39
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>



</style>
<template>
<div class="v-admin-product-attribute-edit">
    <Form ref="formValidate" :model="formValidate" :label-width="80">

        <Form-item label="所属模型" prop="product_mod_id">
            <Select v-model="formValidate.product_mod_id" clearable filterable transfer>
                <Option v-for="model in productModels" :value="model.id + ''" :key="model.id">{{ model.name }}</Option>
            </Select>
        </Form-item>

        <Form-item label="属性名称" prop="name">
            <Input type="text" v-model="formValidate.name" placeholder="请输入属性名称"></Input>
        </Form-item>

        <Form-item v-for="(value,index) in formValidate.attribute_values" :key="index" :label="'属性值' + (index + 1)">
            <Row>
                <Col span="22">
                    <Input type="text" v-model="value.value" placeholder="请输入属性值"></Input>
                </Col>
                <Col span="1" :offset="1">
                    <Button type="error" size="small" icon="minus" @click="deleteSpec(index)"></Button>
                </Col>
            </Row>
        </Form-item>

        <Form-item label="增删属性值">
            <Button type="success" size="small" icon="plus" @click="addSpec"></Button>
        </Form-item>

        <Form-item>
            <Button type="primary" @click="updateAttribute">更新</Button>
        </Form-item>

    </Form>
</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

export default {
    name: 'product-attribute-edit',
    props: ['attributeDetail','productModels'],
    data() {	
        return {

            formValidate : {

                name : '',

                product_mod_id : '',

                attribute_values : []

            }                  //更新模型时的表单

        }
    },
    watch: {
        'attributeDetail' : function(){

            if( this.attributeDetail ) {

                this.formValidate.name = this.attributeDetail.name;
                this.formValidate.product_mod_id = String(this.attributeDetail.product_mod_id);

                this.formValidate.attribute_values = this.attributeDetail.attribute_values.map((attribute_value) => {        
                    return {
                        id: attribute_value.id,
                        value: attribute_value.value
                    }
                });

            }

        }
    },
    methods: {

        /**
         * 增加属性值
         * @return {undefined}
         */
        addSpec(){

            const param = {
                id: 0,
                value : ''
            };

            this.formValidate.attribute_values.push(param);

        },

        /**
         * 删除属性值
         * @return {undefined}
         */
        deleteSpec(index){

            this.formValidate.attribute_values.splice(index,1);

        },

        /**
         * 更新产品属性信息
         * @return {undefined}
         */
        updateAttribute(){

            const param = {

                _method : 'PUT',

                name : this.formValidate.name,

                product_mod_id : this.formValidate.product_mod_id,

                attribute_values : this.formValidate.attribute_values

            }

            this.$emit('update',this.attributeDetail.id,param);

        }
        
    }
}
</script>